<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.id">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="val in item.values" :key="val.name">
          <img
            :src="val.picture"
            v-if="val.picture"
               :title="val.name"
            @click="clickSpecs(item, val)"
            :class="{ selected: val.selected, disabled: val.disabled }"
            alt=""
          />
          <span
            v-else
            @click="clickSpecs(item, val)"
            :class="{ selected: val.selected,disabled: val.disabled }"
            >{{ val.name }}</span
          >
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
// 引入算法
import bwPowerSet from '@/vender/power-set'
// import Message from '@/components/library/Message'
// // 然后定义数组
// const res = bwPowerSet(['蓝色', '中国', '10cm'])
// // 定义一个空数组
// const arr = []
// // 然后遍历每一项
// res.forEach(item => {
//   // 累加进去 join是把数组变成字符串
//   arr.push(item.join('x'))
// })
// console.log(arr)
// 定义一个函数得到路劲字典对象
const spliter = '/'

const getPathMap = (skus) => {
  // 定义对象
  const pathMap = {}
  skus.forEach(sku => {
    // 判断有没有sku里面的库存
    if (sku.inventory) {
      // console.log(sku)
      // 拿到算法，把算法里面的key就是蓝色 黑色 10CM，map进去  ["黑色", "日本"] valueName: "蓝色"
      const powerSetRes = bwPowerSet(sku.specs.map(item => item.valueName))
      // console.log(powerSetRes)
      // 然后遍历上面map好的数据
      powerSetRes.forEach(item => {
        // 加上面的/在转换成字符串
        const key = item.join(spliter)
        // 如果没有key值，就要把sku.id全部加进去
        if (!pathMap[key]) {
          pathMap[key] = [sku.id]
          // // 已经存在，追加新的 skuid 进去即可
          // 如果选中了key值，就是把这个品牌的id追加进去，例如选中了10cm 或者30cm 就会把相对应的id加进去
        } else {
          pathMap[key].push(sku.id)
        }
      })
    }
  })
  return pathMap
}
// 得到当前选中规格集合
// 得到当前选中规格集合 - 用于模拟用户下一次的动作
const getSelectedArr = specs => {
  // console.log(specs)
  const arr = []
  specs.forEach(spec => {
    // console.log(spec)
    const obj = spec.values.find(item => item.selected)
    // console.log(obj.name)
    arr.push(obj ? obj.name : undefined)
  })
  return arr
}

// 更新按钮的禁用状态
const updateDisabledStatus = (specs, pathMap) => {
  // console.log(11111, specs, pathMap)
  specs.forEach((spec, index) => {
    // 先获取当前选中的规格集合
    const selectedArr = getSelectedArr(specs)
    // console.log(selectedArr, spec)
    // 🔔 根据当前选中，模拟用户的下一次选中
    spec.values.forEach(item => {
      // 已经选中的按钮不用判断
      if (selectedArr[index] === item.name) return
      // 模拟其他未选中的值
      selectedArr[index] = item.name
      // 过滤掉无效值并处理成字符串，用于查字典
      const key = selectedArr.filter(v => v).join(spliter)
      // console.log('模拟用户的下一次操作', selectedArr)
      // 查找字典中是否存在，不存在就处理成禁用状态
      item.disabled = !pathMap[key]
    })
  })
}
const initSelectedStatus = (skuId, goods) => {
  const obj = goods.skus.find(item => item.id === skuId)
  if (obj) {
    goods.specs.forEach((spec, index) => {
      const value = obj.specs[index].valueName
      // console.log(spec, value, index)
      spec.values.forEach(val => {
        val.selected = val.name === value
      })
    })
  }
}
export default {

  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => ({})
    },
    skuId: {
      type: String,
      default: ''
    }
  },

  setup (props, { emit }) {
    // 把数据的skus拿出来给到定义的变量 skus全部的主要是拿id的
    const pathMap = getPathMap(props.goods.skus)
    initSelectedStatus(props.skuId, props.goods)
    // console.log(pathMap)
    updateDisabledStatus(props.goods.specs, pathMap)
    // 点击规格实现选中高亮效果
    const clickSpecs = (theItem, theVal) => {
      if (theVal.disabled) return
      // 选中效果
      if (!theVal.selected) {
        // 排他：先清空，再让当前高亮
        theItem.values.forEach(item => { item.selected = false })
        theVal.selected = true
        const res = getSelectedArr(props.goods.specs)
        if (res.includes(undefined)) {
          // console.log(1)
          // Message({ type: 'success', message: '规格不完整' })
          emit('change', {})
        } else {
          // Message({ type: 'success', message: '规格完整' })
          // console.log(2, '规格完整')
          const key = res.join(spliter)
          const [skuId] = pathMap[key]
          // console.log(skuId)
          const obj = props.goods.skus.find(item => item.id === skuId)
          // console.log(obj)
          const data = {
            skuId: obj.id,
            inventory: obj.inventory,
            oldPrice: obj.oldPrice,
            price: obj.price,
            attrsText: obj.specs.map(({ name, valueName }) => `${name}:${valueName}`).join('')
          }
          emit('change', data)
        }
      } else {
        // 取消选中
        theVal.selected = false
      }
      // 更新完成继续模拟
      updateDisabledStatus(props.goods.specs, pathMap)
    }
    return { clickSpecs }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
